<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新建地址</title>
    <link href="${base}/sweep/css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="${base}/sweep/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/sweep/css/app.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/sweep/icon/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/sweep/css/mui.picker.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/sweep/css/mui.poppicker.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/frame/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/backstage/css/style.css"/>
    <script src="${base}/backstage/js/jquery.js"></script>
    <script src="${base}/sweep/icon/iconfont.js"></script>
    <script src="${base}/sweep/js/mui.min.js"></script>
    <script src="${base}/frame/layui/layui.js"></script>
    <script src="${base}/sweep/js/mui.picker.js"></script>
    <script src="${base}/sweep/js/mui.poppicker.js"></script>
    <script src="${base}/sweep/js/city.data.js" type="text/javascript" charset="utf-8"></script>
    <script src="${base}/sweep/js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<br>
<div class="mui-content">
    <div class="mui-content-padded" style="margin: 5px;">
        <form class="mui-input-group">
            <br>
            <div class="mui-input-row">
                <input type="text" id="userName" class="mui-input-clear" placeholder="请输入收件人名称">
            </div>
            <br>
            <div class="mui-input-row">
                <input type="text" id="phone" class="mui-input-clear" placeholder="请输入收件人电话">
            </div>
            <br>
            <button id='showCityPicker3' type="button" class="mui-btn mui-btn-warning" style="float: right">选择地区</button>
            <div class="mui-input-row">
                <input type="text" id="cityResult3" class="ui-alert" placeholder="请输入收件人地址">
            </div>
            <br>
            <div class="mui-input-row" style="margin: 10px 17px;">
                <textarea id="xi" rows="5" placeholder="详细地址"></textarea>
            </div>

<#--                    <li class="mui-table-view-cell">-->
<#--                        默认地址-->
<#--                        <div id="M_Toggle" class="mui-switch">-->
<#--                            <div class="mui-switch-handle"></div>-->
<#--                        </div>-->
<#--                    </li>-->
        </form>
    </div>
</div>
<form class="layui-form" action="">
<div class="layui-form-item">
    <label class="layui-form-label">默认地址</label>
    <div class="layui-input-block" style="float: right;position: relative;bottom:7px;margin-right: 20px;">
        <input type="checkbox"  lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
</div>
</form>
<br>
<br>
<br>

<div class="mui-content" style="position: absolute;bottom: 0px;width: 100%">
    <div class="mui-content-padded">
        <button type="button"  class="mui-btn mui-btn-warning mui-btn-block"  onclick="saveAddress()">保 存 地 址</button>
    </div>
</div>
</body>

<script>
    (function($, doc) {
        $.init();
        $.ready(function() {
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('showCityPicker3');
            var cityResult3 = doc.getElementById('cityResult3');
            showCityPickerButton.addEventListener('tap', function(event) {
                cityPicker3.show(function(items) {
                    document.getElementById("cityResult3").value = "" + _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                });
            }, false);
        });
    })(mui, document);

    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    var state = "";
    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;


        //监听指定开关
        form.on('switch(switchTest)', function(data){
            // layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
            //     offset: '6px'
            // });
            // layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
             if(this.checked ? 'true' : 'false'==true){
                 state=1;
             }else {
                 state = 2
             }
            // console.log(state)
        });

    })
</script>
<script>

    function saveAddress() {
        if($("#userName").val()==""){
            mui.toast('姓名不能为空');
            return;
        }
        var phone = $("#phone").val();
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            mui.toast("手机号格式有误，请重填");
            return false;
        }
        if($("#phone").val()==""){
            mui.toast('手机号不能为空');
            return;
        }
        if($("#cityResult3").val()==""){
            mui.toast('地址不能为空');
            return;
        }
        if($("#xi").val()==""){
            mui.toast('详细地址不能为空');
            return;
        }
        var formDate = {
            userId:'${userId}',
            name:$("#userName").val(),
            xi:$("#xi").val(),
            address:$("#cityResult3").val(),
            state:state,
            phone:$("#phone").val()
        }

        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: "${base}/wx/address/saveOrUpdateById",
            data: JSON.stringify(formDate),
            success: function (data) {
                if (data.code === 200) {
                    mui.toast(data.msg);
                    $("#userName").val("")
                    $("#cityResult3").val("")
                    $("#xi").val("")
                    $("#phone").val("")
                    window.location.href = "${base}/wx/user/address.html"
                } else {
                    mui.toast(data.msg);
                }
            }
        });
    }
</script>
</html>